<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<title>Wap 电商平台</title>
		<meta charset="UTF-8">
		<script th:replace="common/head::static"></script>
	</head>
</html>
<body>
	<div id="app">
		<nut-navbar back-show="false" :more-show="false" class="demo-nav" @on-click-back="toSearch" title="首页">
			<template slot="back-icon">
				<nut-icon type="search" style="height:40px;"></nut-icon>
			</template>
		</nut-navbar>
		<nut-swiper
		    direction="horizontal"
		    :lazyLoad="true"
		    :loop="true"
		    :paginationVisible="true"
		    ref="demo5"
		>
		    <div  v-for="(item,index) in dataImgItem" :key="index"  class="nut-swiper-slide ">
		    	<img :src="item.imgSrc"   style="max-width:100%; max-height:100%;min-width:100%;" class="nut-img-lazyload"/> 
		    </div>
		
		</nut-swiper>
		<row padding="15px 10px 0">
			<column style="flex:1;">
				<skeleton-circle diameter="80px"></skeleton-circle>
			</column>
			<column style="flex:1;">
				<skeleton-circle diameter="80px"></skeleton-circle>
			</column>
			<column style="flex:1;">
				<skeleton-circle diameter="80px"></skeleton-circle>
			</column>
			<column style="flex:1;">
				<skeleton-circle diameter="80px"></skeleton-circle>
			</column>
		</row>
		<nut-noticebar
	      left-icon="https://img13.360buyimg.com/imagetools/jfs/t1/72082/2/3006/1197/5d130c8dE1c71bcd6/e48a3b60804c9775.png"
	    	style="margin:10px;"
	    >华为畅享9新品即将上市，活动期间0元预约可参与抽奖，赢HUAWEI WATCH等好礼，更多产品信息请持续关注！
    	</nut-noticebar>
		<row padding="15px 10px 0">
			<skeleton-circle diameter="80px" ></skeleton-circle>
			<column style="flex:1;">
				<skeleton-square 
			        width="250px" 
			        :count="3" 
			        margin="5px 10px 5px 10px"
			    ></skeleton-square>
			</column>
		</row>
		<row padding="15px 10px 0">
			<skeleton-circle diameter="80px" ></skeleton-circle>
			<column style="flex:1;">
				<skeleton-square 
			        width="250px" 
			        :count="3" 
			        margin="5px 10px 5px 10px"
			    ></skeleton-square>
			</column>
		</row>
		<nut-noticebar
	      left-icon="https://img13.360buyimg.com/imagetools/jfs/t1/72082/2/3006/1197/5d130c8dE1c71bcd6/e48a3b60804c9775.png"
	    	style="margin:10px;"
	    >知名品牌上架入住，更多介绍信息请持续关注！
    	</nut-noticebar>
		<row padding="15px 10px 10px">
			<skeleton-square width="120px" height="120px"></skeleton-square>
			<column style="flex:1;">
				<skeleton-square 
			        width="220px" 
			        :count="2" 
			        margin="5px 10px 5px 10px"
			    ></skeleton-square>
			    <skeleton-square 
			        width="30px" 
			        margin="30px 0 0 10px"
			    ></skeleton-square>
			</column>
		</row>
		
		<nut-tabbar @tab-switch="tabSwitch1" :tabbar-list="tabList" :bottom="true"> </nut-tabbar>
	</div>
	<script src="./js/menu.js" type="text/javascript"></script>
	<script type="text/javascript">
		tabList = menuList;
		tabList[0].curr = true;
		new Vue({
			el: '#app',
            data() {
				return {
			      	tabList: tabList,
				   	dataItem:[],
				    dataImgItem:[]
				}
			},
			created: function(){
				self = this;
				self.dataItem = [{
                    name:1
                },{
                    name:2
                },{
                    name:3
                },{
                    name:4
                }]
				self.dataImgItem = [
                    {
                        imgSrc:'//m.360buyimg.com/mobilecms/s750x366_jfs/t1/18629/34/3378/144318/5c263f64Ef0e2bff0/0d650e0aa2e852ee.jpg'
                    },
                    {
                        imgSrc:'https://m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png'
                    },
                    {
                        imgSrc:'https://m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg'
                    },
                    {
                        imgSrc:'https://m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg'
                    }
                ];
				setTimeout(function(){
					$(".nut-swiper-pagination").show();
				},1000);
			},
			methods: {
				tabSwitch1: function(value, index) {
					var path = "";
					switch(index) {
						case 0:
							path = "/index"
							break;
						case 1:
							path = "/goods"
							break;
						case 2:
							path = "/order"
							break;
						case 3:
							path = "/my"
							break;
					}
					location.href = path;
				},
				toSearch: function(){
					location.href = "/doSearch"
				}
			}
		});
	</script>
</body>